{extend name="layouts/main" /}
{block name="content"}
<div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
	<div class="layui-body layui-tab-content site-demo site-demo-body" style="top: 0px;left: 0px;">
		<div class="layui-tab-item layui-show">
			<div class="layui-main">
				<div id="LAY_preview">
					<form class="layui-form layui-form-pane form-horizontal" method="post">
					{empty name="custom_config"}
						{foreach name="info.config" item="vo" key="k"}
							{switch name="vo.type"}
								{case value="remark"}<!-- 注释 -->
									{$vo.value}
								{/case}
								{case value="radio"}<!-- 单选 -->
								<div class="layui-form-item">
									<label class="layui-form-label" title="{$vo.title}">{$vo.title}</label>
									<div class="layui-input-block">
										{foreach name="vo.content" item="v" key="_k"}
										<input type="radio" name="config[{$k}]" lay-verify="{$vo.rule}" value="{$_k}" title="{$v}" {eq name="vo.value" value="$_k"}checked{/eq}>
										{/foreach}<br/>
										{if $vo.tips}<span class="layui-form-mid layui-word-aux">[ {$vo.tips|raw} ]</span>{/if}
										<span class="sysval"><em class="zerocopy">{$k}</em></span>
									</div>
								</div>
								{/case}
								{case value="text"}<!-- 字符串 -->
								<div class="layui-form-item">
									<label class="layui-form-label" title="{$vo.title}">{$vo.title}</label>
									<div class="layui-input-block">
										<input type="text" name="config[{$k}]" lay-verify="{$vo.rule}" placeholder="请输入{$vo.title}" autocomplete="off" class="layui-input" value="{$vo.value}">
										{if $vo.tips}<div class="layui-form-mid layui-word-aux">[ {$vo.tips|raw} ]</div>{/if}
										<span class="sysval"><em class="zerocopy">{$k}</em></span>
									</div>
								</div>
								{/case}
								{case value="textarea"}<!-- 文本框 -->
								<div class="layui-form-item layui-form-text">
									<label class="layui-form-label" title="{$vo.title}">{$vo.title}<span class="sysval"><em class="zerocopy">{$k}</em></span></label>
									<div class="layui-input-block">
										<textarea name="config[{$k}]" placeholder="请输入{$vo.title}" lay-verify="{$vo.rule}" class="layui-textarea">{$vo.value}</textarea>
										{if $vo.tips}<span class="layui-form-mid layui-word-aux">[ {$vo.tips|raw} ]</span>{/if}
									</div>
								</div>
								{/case}
								{case value="password"}<!-- 密码 -->
								<div class="layui-form-item">
									<label class="layui-form-label" title="{$vo.title}">{$vo.title}</label>
									<div class="layui-input-block">
										<input type="password" name="config[{$k}]" lay-verify="{$vo.rule}" placeholder="请输入{$vo.title}" autocomplete="off" class="layui-input" value="{$vo.value}">
										<span class="sysval"><em class="zerocopy">{$k}</em></span>
									</div>
									{if $vo.tips}<div class="layui-form-mid layui-word-aux">[ {$vo.tips|raw} ]</div>{/if}
								</div>
								{/case}
								{case value="select"}<!-- 下拉框 -->
								<div class="layui-form-item">
									<label class="layui-form-label" title="{$vo.title}">{$vo.title}</label>
									<div class="layui-input-block">
										<select name="config[{$k}]" lay-verify="{$vo.rule}">
											<option value=""></option>
											{foreach name="vo.content" item="v" key="_k"}
											<option value="{$_k}" {eq name="vo.value" value="$_k"}selected{/eq}>{$v}</option>
											{/foreach}
										</select>
										<span class="sysval"><em class="zerocopy">{$k}</em></span>
									</div>
									{if $vo.tips}<div class="layui-form-mid layui-word-aux">[ {$vo.tips|raw} ]</div>{/if}
								</div>
								{/case}
								{case value="image"}<!-- 图片 -->
								<div class="layui-form-item">
									<label class="layui-form-label" title="{$vo.title}">{$vo.title}</label>
									<input type="hidden" name="config[{$k}]" imgidid="{$k}" value="{$vo.value}">
									<div class="layui-input-inline">
										<div class="layui-upload">
											<button type="button" class="layui-btn layui-btn-primary uploads" filename="{$k}" data-path="{$info.name}"><i class="icon icon-upload3"></i>点击上传</button>
											<div class="layui-upload-list" id="{$k}" {empty name="$vo.value"} style="display: none;" {/empty}>
												<img data-image class="layui-upload-img" imgid="{$k}" src="{$vo.value|get_file_url}" width="100px" height="100px">
												<p id="notice"></p>
											</div>
											<span class="sysval"><em class="zerocopy">{$k}</em></span>
										</div>
									</div>
									{if $vo.tips}<div class="layui-form-mid layui-word-aux">[ {$vo.tips|raw} ]</div>{/if}
								</div>
								{/case}
								{case value="array"}<!-- 数组 -->
								<div class="layui-form-item">
									<label class="layui-form-label" title="{$vo.title}">{$vo.title}</label>
									<div class="layui-inline array-move">
										{if condition="$vo.content"}
										{foreach name="vo.content" item="v" key="_k"}
										<div>
											<div class="layui-inline" style="padding-bottom: 1px;">
												<label class="layui-form-label" style="width: 45px;">键</label>
												<div class="layui-input-inline" style="width: 350px;">
													<input type="text" name="config[{$k}][0][]" lay-verify="{$vo.rule}" placeholder="请输入键" autocomplete="off" class="layui-input" value="{$_k}" style="height: 38px;">                        
													<span class="sysval"><em class="zerocopy">{$k}</em></span>
												</div>
											</div>
											<div class="layui-inline" style="padding-bottom: 1px;">
												<label class="layui-form-label" style="width: 45px;">值</label>
												<div class="layui-input-inline" style="width: 350px;">
													<input type="text" name="config[{$k}][1][]" lay-verify="{$vo.rule}" placeholder="请输入值" autocomplete="off" class="layui-input" value="{$v}" style="height: 38px;">                        
													<span class="sysval"><em class="zerocopy">{$k}.{$_k}</em></span>
												</div>
											</div>
											<div class="layui-inline">
												<div class="layui-form-mid"><a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-danger" onclick="delinfo(this)">-</a></div>
											</div>
											<div class="layui-inline">
												<div class="layui-form-mid"><a href="javascript:;" class="layui-btn layui-btn-xs"><i class="layui-icon" style="margin-right: 0px;">&#xe622;</i></a></div>
											</div>
										</div>
										{/foreach}
										{else/}
										<div>
											<div class="layui-inline" style="padding-bottom: 1px;">
												<label class="layui-form-label" style="width: 45px;">键</label>
												<div class="layui-input-inline" style="width: 350px;">
													<input type="text" name="config[{$k}][0][]" lay-verify="{$vo.rule}" placeholder="请输入键" autocomplete="off" class="layui-input" value="" style="height: 38px;">                        
													<span class="sysval"><em class="zerocopy">键</em></span>
												</div>
											</div>
											<div class="layui-inline" style="padding-bottom: 1px;">
												<label class="layui-form-label" style="width: 45px;">值</label>
												<div class="layui-input-inline" style="width: 350px;">
													<input type="text" name="config[{$k}][1][]" lay-verify="{$vo.rule}" placeholder="请输入值" autocomplete="off" class="layui-input" value="" style="height: 38px;">                        
													<span class="sysval"><em class="zerocopy">值</em></span>
												</div>
											</div>
											<div class="layui-inline">
												<div class="layui-form-mid"><a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-danger" onclick="delinfo(this)">-</a></div>
											</div>
											<div class="layui-inline">
												<div class="layui-form-mid"><a href="javascript:;" class="layui-btn layui-btn-xs"><i class="layui-icon" style="margin-right: 0px;">&#xe622;</i></a></div>
											</div>
										</div>
										{/if}
									</div>
									<button type="button" class="layui-btn btn-append" style="display: block;">追加</button>
									{if $vo.tips}<div class="layui-form-mid layui-word-aux">[ {$vo.tips|raw} ]</div>{/if}
								</div>
								{/case}
								{case value="checkbox"}<!-- 多选 -->
								<div class="layui-form-item" pane="">
									<label class="layui-form-label">{$vo.title}</label>
									<div class="layui-input-block" style="border: none;">
										<input type="hidden" id="filter_{$k}" name="config[{$k}]" value="{$vo.value}">
										{foreach name="vo.content" item="v" key="_k"}
									    <input type="checkbox" class="filter_{$k}" lay-filter="filter_{$k}" value="{$_k}" title="{$v}" {if in_array($_k,explode(',',$vo['value']))}checked=""{/if} lay-skin="primary">
									    {/foreach}
									</div>
									<span class="sysval"><em class="zerocopy">{$k}</em></span>
								</div>
								{if $vo.tips}<div class="layui-form-mid layui-word-aux">[ {$vo.tips|raw} ]</div>{/if}
								<script type="text/javascript">
									layui.use(['form','jquery'], function(){
										var form = layui.form //表单
										,$ = layui.jquery;
										form.on('checkbox(filter_{$k})', function(data){
											// console.log(data.elem);//得到checkbox原始DOM对象
											// console.log(data.elem.checked);//开关是否开启，true或者false
											// console.log(data.value);//开关value值，也可以通过data.elem.value得到
											// console.log(data.othis);//得到美化后的DOM对象
											var arr = [];
											$("input:checkbox[class='filter_{$k}']:checked").each(function(i){
											   	arr.push($(this).val());
									        });
											if (arr.length > 0) {
												data=arr.join(",");
												$("#filter_{$k}").val(data);
											} else {
												$("#filter_{$k}").val('');
											}
										});
									});
								</script>
								{/case}
							{/switch}
						{/foreach}
					{else /}
						{present name="custom_config"}
							{$custom_config|raw}
						{/present}
					{/empty}
						<div class="layui-form-item">
							<div class="layui-input-block" style="border: none;">
								<input type="hidden" name="id" value="{:input('id')}" >
            					<input type="hidden" name="name" value="{:input('name')}" >
								<!-- 方法一：使用ajax-post -->
								<!-- <button class="layui-btn x_admin_close ajax-post" type="submit" target-form="form-horizontal" lay-submit="" lay-filter="formDemo">提交保存</button> -->
								<!-- 方法二：使用layui监听表单提交 -->
								<button class="layui-btn x_admin_close" lay-submit lay-filter="formDemo">提交保存</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="footer"}
{/block}
{block name="js"}
<script type="text/javascript">
	layui.define(['jquery','form','layer','upload'], function (exports) {
		var $ = layui.jquery,
		form = layui.form,
		layer = layui.layer,
		upload = layui.upload;
		// 图片上传
		if($('.uploads')){
            // 普通图片上传
            // var path = $('#uploads').attr('data-path');
            // var type = $('#uploads').attr('data-type');
            var uploadInt = upload.render({
                elem: '.uploads'
                // ,url: GV.upload_url'?path='+path+'&type='+type
                ,url: GV.image_upload_url
                ,before: function(obj){
					var item = this.item;
					var filename = $(item).attr('filename');
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
						// $('#addPic').attr('src', result);//图片链接（base64）
						$("#"+filename).show();
						$("img[imgid="+filename+"]").attr('src', result);
                    });
                },
                done: function(res){
					var item = this.item;
					var filename = $(item).attr('filename');
                    if(res.code == 0){
						$("input[imgidid="+filename+"]").val(res.path);
                        return msg_success('上传成功');
                    }else{
                        return msg_error('上传失败');
                    }
                }
                ,error: function(){
                    // 演示失败状态，并实现重传
                    var notice = $('#notice');
                    notice.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    notice.find('.demo-reload').on('click', function(){
                        uploadInt.upload();
                    });
                }
            });
		}
		// 自定义验证规则，这个里面的title、number就写在Html 代码中lay-verify的属性值，即可 例如：lay-verify="title"
		form.verify({
			/* name: function(value, item){ //value：表单的值、item：表单的DOM对象
				if(value.length < 3){
					return '管理员账户至少得3个字符啊';
				}
			} */
		});
	});
	/* 成功
	* @param title
	* @returns {*}
	*/
	function msg_success (title) {
		layer.msg(title, {icon: 1, shade: this.shade, scrollbar: false, time: 2000, shadeClose: true});
	};
	/**
	 * 失败
	 * @param title
	 * @returns {*}
	 */
	function msg_error(title) {
		layer.msg(title, {icon: 2, shade: this.shade, scrollbar: false, time: 3000, shadeClose: true});
	};
</script>
{/block}